import { styled } from "@linaria/react"
import { View, Image, Button } from "@tarojs/components"

import starLeftSVG from "@/assets/star-left.svg";
import starRightSVG from "@/assets/star-right.svg";
import { useEffect, useState } from "react";

export default function RatingDialogue({ closeDialogue, setRating }: {
  closeDialogue?: () => void,
  setRating: (rating: number) => void
}) {
  const [tempRating, setTempRating] = useState<number|null>(null);
  const rating = tempRating === null ? 0 : tempRating;

  useEffect(() => console.log(233))

  return (
    <>
      <RatingDialogueMask onClick={
        () => closeDialogue && closeDialogue()
      }>
        <RatingDialogueView onClick={e => e.stopPropagation()}>
          <StarBlock>
            {(new Array(5).fill(0)).map((_, index) => (
              <>
                <HalfImage src={starLeftSVG} mode="aspectFill" 
                  style={{ filter: `grayscale(${ (index + 0.5) <= rating ? '0' : '1' })` }}
                  onClick={() => setTempRating(index + 0.5)}
                />
                <HalfImage src={starRightSVG} mode="aspectFill"
                  style={{ filter: `grayscale(${ (index + 1) <= rating ? '0' : '1' })` }}
                  onClick={() => setTempRating(index + 1)}
                />
              </>
            ))}
          </StarBlock>
          <SubmitButton style={tempRating === null ? {background: '#eee !important'} : {}} plain
            onClick={() => setRating(rating)} disabled={tempRating === null}
          >提交</SubmitButton>
        </RatingDialogueView>
      </RatingDialogueMask>
    </>
  )
}

const RatingDialogueMask = styled(View)`
  position: fixed;
  width: 100%;
  height: 100%;

  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
`

const RatingDialogueView = styled(View)`
  position: absolute;
  inset: 0;
  margin: auto;
  width: 600px;
  height: fit-content;
  /* height: 300px; */
  border-radius: 16px;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background-color: white;
`

const StarBlock = styled(View)`
  height: 220px;

  display: flex;
  /* flex-direction: row; */
  align-items: center;
`

const HalfImage = styled(Image)`
  width: 50px;
  height: 100px;
`

const SubmitButton = styled(Button)`
  /* position: absolute; */
  border: none !important;
  /* bottom: 0; */
  width: 100%;
  height: 100px;
  border-radius: 0;

  color: white !important;
  background-color: #f2c54a !important;

  ::after {
    content: none;
  }
`